<template>
  <cu-layout :bgStyle="{ color: '#ffffff' }" :navProp="{ placeholder: true, bgColor: 'rgba(255,255,255)' }">
    <view :class="[`${prefixCls}-article-container`]">
      <uv-sticky offsetTop="0" :customNavHeight="$Platform.navbar">
        <view class="uv-article-navbar">
          <uv-tabs :list="navList" :scrollable="false" v-model="current" :lineColor="theme" :activeStyle="activeStyle" :inactiveStyle="inactiveStyle" @change="currentChange" />
        </view>
      </uv-sticky>
      <view v-if="dataList.length" class="article-list">
        <view class="article-item" v-for="(item, index) in dataList" :key="index" @click="toDetail(item)">
          <view class="left">
            <image :src="item.image_src" alt="" />
          </view>
          <view class="right">
            <view class="title">{{ item.title }}</view>
            <view class="small-title">{{ item.subtitle }}</view>
          </view>
        </view>
        <uv-safe-bottom></uv-safe-bottom>
      </view>
      <view v-else class="article-list">
        <cu-empty mode="list" text="暂无推送"> </cu-empty>
      </view>
    </view>
  </cu-layout>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import { getArticleList, getTypeConfig } from './api'
export default {
  name: 'articleIndex',
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      current: '',
      start: 0,
      length: 20,
      dataList: [],
      activeStyle: { color: this.theme, fontSize: '12px' },
      inactiveStyle: { fontSize: '12px' },
      navList: [],
      moreFinish: false,
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    ...mapGetters(['theme', 'cityConfig']),
  },

  onLoad() {
    this.getData()
  },
  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
  // 下拉刷新
  onPullDownRefresh() {
    this.moreFinish = false
    this.start = 0
    this.dataList = []
    this.getArticleList()
  },
  // 加载更多
  onReachBottom() {
    if (!this.moreFinish) {
      this.start++
      this.getArticleList()
    }
  },
  methods: {
    ...mapActions([]),
    async getData() {
      await this.getTypeConfig()
      this.getArticleList()
    },
    async getTypeConfig() {
      const { data } = await getTypeConfig()
      this.navList = data.map((item) => {
        return {
          ...item,
          name: item.type_name,
          value: item.id,
        }
      })
      this.current = this.navList[0].id
    },
    async getArticleList() {
      try {
        const { data } = await getArticleList({ type_id: this.current, cityId: this.cityConfig.cityId, start: this.start, length: this.length })
        if (data.data.length == 0) return uni.$uv.toast('内容暂未开放，敬请期待~')
        if (data.data.length < this.length) {
          this.moreFinish = true
        }
        this.dataList = this.dataList.concat([...data.data])
        uni.stopPullDownRefresh()
      } catch (e) {}
    },
    toDetail(item) {
      //  #ifdef H5
      if (item.is_link == 1) {
        this.$ROUTE.go(item.jump_url)
        return
      }
      // #endif
      this.$ROUTE.go('/pages/subpackage/article/detail', { id: item.id })
    },
    currentChange(e) {
      this.current = e.value
      this.moreFinish = false
      this.start = 0
      this.dataList = []
      this.getArticleList()
    },
  },
}
</script>

<style lang="scss" scoped>
.#{prefixCls('article-container')} {
  position: relative;
  background: #f7f7f7;
  .uv-article-navbar {
    background: white;
    text-align: center;
    margin-bottom: 15rpx;
  }
  .article-list {
    margin: 0 16rpx;
    .article-item {
      width: 100%;
      box-sizing: border-box;
      display: flex;
      margin-bottom: 20rpx;
      background: white;
      padding: 20rpx;
      border-radius: 8rpx;
      .left {
        width: 240rpx;
        height: 180rpx;
        background: #f7f7f7;
        position: relative;
        border-radius: 8rpx;
        overflow: hidden;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .right {
        margin-left: 16rpx;
        margin-top: 8rpx;
        width: 400rpx;
        .title {
          font-weight: bold;
          color: #222222;
          font-size: 28rpx;
          line-height: 40rpx;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          margin-bottom: 20rpx;
        }
        .small-title {
          font-weight: 400;
          line-height: 32rpx;
          color: #666666;
          font-size: 22rpx;
          display: -webkit-box;
          overflow: hidden;
          text-overflow: ellipsis;
          word-break: break-all;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
        }
      }
    }
  }
}
</style>
